<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>收容社区</title>

    <!--默认样式-->
    <link rel="stylesheet" href="/css/reset.css">


    <!--响应式框架-->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">

    <!--css3动画库-->
    <link rel="stylesheet" href="/css/animate.css">

    <!--banner大图基础样式-->
    <link rel="stylesheet" href="/css/slick.css">

    <!--页面滚动基础样式-->
    <link rel="stylesheet" href="/css/jquery.fullPage.css" />

    <!--导航样式-->
    <link rel="stylesheet" href="/css/head.css" />

    <!--图片和滚屏样式-->
    <link rel="stylesheet" href="/css/index.css">

    <!--第二页图片和滚屏样式-->
    <link rel="stylesheet" href="css/style.css">




</head>
<body>
<!-- 导航 -->
<header class="header">
    <div class="container clearfix">
        <div class="fr nav">
            <ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
                <li class="active">
                    <a href="javascript:void(0)">首页</a>
                </li>
                <li class="dropdown">
                    <a href="/index">进入社区</a>
                </li>
                <li>
                    <a href="javascript:void(0)">关于我们</a>
                </li>

            </ul>
        </div>
        <a href="javascript:void(0)" id="navToggle">
            <span></span>
        </a>
    </div>
</header>
<!--移动端的导航-->
<div class="m_nav">
    <div class="top clearfix">
        <img src="image/closed.png" alt="" class="closed" />
    </div>
    <div class="logo">
        <img src="image/logo2.jpg" alt="" />
    </div>
    <ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
        <li class="active">
            <a href="javascript:void(0)">首页</a>
        </li>

        <li>
            <a href="javascript:void(0)">进入社区</a>
        </li>

        <li>
            <a href="javascript:void(0)">关于我们</a>
        </li>
    </ul>
</div>
<!-- 内容 -->
<div id="index_main" class="index_main">
    <!--导航-->
    <div class="section section1">
        <div class="index_banner">
            <div class="item">
                <div class="items scaleBg" style="background-image: url(image/banner1.jpg);"></div>
                <div class="inner">
                    <div class="block_txt">
                        <h4> Respect life , Care for Pet</h4>
                        <h2><span>尊重生命</span>关爱流浪动物</h2>
                        <h3>
                            <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
                                <p>动物是人类亲密的朋友，人类是动物信赖的伙伴</p>
                            </div>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="items scaleBg" style="background-image: url(image/2.jpg);"></div>
                <div class="inner">
                    <div class="block_txt">
                        <h4> </h4>
                        <h2>请爱护人类最亲密的朋友</h2>
                        <h3>中国的流浪猫狗数量大概在一亿左右！</h3>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="items scaleBg" style="background-image: url(image/banner2.jpg);"></div>
                <div class="inner">
                    <div class="block_txt">
                        <h4> </h4>
                        <h2>请珍惜我们地球上唯一的</h2>
                        <h3>不要让我们的孩子只能在博物馆里才能见到今天的动物</h3>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="items scaleBg" style="background-image: url(image/banner3.jpg);"></div>
                <div class="inner">
                    <div class="block_txt">
                        <h4> Goodliness,to be continued</h4>
                        <h2>让<span>美好持续</span>发生</h2>
                        <h3>我们有让美好持续发生的愿望，更有让美好持续发生的能力</h3>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="items scaleBg" style="background-image: url(image/banner4.jpg);"></div>
                <div class="inner">
                    <div class="block_txt">
                        <h4> Keeping Protect </h4>
                        <h2>同在地球上,共享大自然</h2>
                        <h3>保护动物  |  人人有责  |  爱护动物</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="left slick_txt">
            <div class="prev slick_arrow"></div>
        </div>
        <div class="right slick_txt">
            <div class="next slick_arrow"></div>
        </div>
        <div class="number">
            <div class="inner clearfix">
                <span class="active">01</span>
                <span >02</span>
                <span >03</span>
                <span >04</span>
                <span >05</span>
            </div>
        </div>
    </div>


    <div class="section section2">
        <div class="container2">
            <div class="box2">
                <img src="img/1000x800.jpg">
                <span>大橘</span>
            </div>
            <div class="box2">
                <img src="img/1000x802.jpg">
                <span>柴三郎</span>
            </div>
            <div class="box2">
                <img src="img/1000x804.jpg">
                <span>喵太郎</span>
            </div>
            <div class="box2">
                <img src="img/1000x806.jpg">
                <span>黑将军</span>
            </div>
        </div>
    </div>



</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/index_slick.js"></script>
<script src="js/index.js"></script>

</body>
</html>